<!--
* @Description: 监控点配置 -> 结构配置
* @Author: yihua
* @Date: 2023/3/29 18:35
* @LastEditTime: 2023/3/29 18:35
-->

<template>
  <div class="carnbon-container">
    <el-breadcrumb separator="/" style="padding:0 20px 10px">
      <el-breadcrumb-item  :to="'/carbon/monitoring/index'">监控点配置</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/carbon/monitoring/view'">结构配置</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="monitoring-content">
      <div class="monitoring-left">
        <div class="monitoring-title">视图结构管理</div>
        <div class="monitoring-tree">
          <el-tree :data="dataSource" node-key="pointId" default-expand-all :expand-on-click-node="false">
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <div class="tree-name" v-if="!data.isEdit">{{ data.pointName }}</div>
                <el-select v-model="data.pointId" class="m-2" v-if="!!data.isEdit">
                  <el-option v-for="item in treeOptions" :key="item.pointId" :label="item.pointName" :value="item.pointId" />
                </el-select>
                <div class="tree-btn-group">
                  <div class="iconfont" v-if="node.level !== 1 && !!data.isEdit" title="完成" @click="onSelectComplete(node, data)">&#xe7c7;</div>
                  <div class="iconfont" v-if="node.level !== 1 && !data.isEdit" title="编辑" @click="onEdit(node, data)">&#xe64f;</div>
                  <div class="iconfont" @click="appendChild(node, data)" title="添加子级">&#xe630;</div>
                  <div class="iconfont" v-if="node.level !== 1" @click="appendSame(node, data)" title="添加同级">&#xe63c;</div>
                  <el-popconfirm title="是否确认删除?" v-if="node.level !== 1" @confirm="confirmDelete(node, data)" @cancel="cancelDelete">
                    <template #reference>
                      <div class="iconfont" title="删除">&#xe62f;</div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="monitoring-right">
        <div class="monitoring-right-title">
          <div class="monitoring-title">未管理结构监控点列表</div>
          <el-button type="primary" @click="onAdd" class="monitoring-add-btn"> 添加监控点 </el-button>
        </div>
        <div class="monitoring-list">
          <div class="monitoring-item" v-for="item in rightOptions" :key="item.pointId">
            {{ item.pointName }}
          </div>
        </div>
      </div>
    </div>
    <footer class="monitoring-footer">
      <el-button @click="onBack">返回</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </footer>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, reactive } from 'vue';
  import type Node from 'element-plus/es/components/tree/src/model/node';
  import { useRouter } from 'vue-router';

  interface Tree {
    pointId: number;
    pointName: string;
    isEdit?: boolean;
    children: Tree[] | null;
  }

  interface OptionProps {
    pointId: number;
    pointName: string;
  }


  let router = useRouter()

  const go = (path: string) => {
    router.push({
      path:path
    })
  }

  const onEdit = (node: Node, data: Tree) => {
    orginNode.value ={...data};
    data.isEdit = true;
    const displayTreeOptions = rightOptions.value.slice();
    displayTreeOptions.push({
      pointId: data.pointId,
      pointName: data.pointName
    });
    treeOptions.value = displayTreeOptions;
    dataSource.value = [...dataSource.value];
  };

  // 选择完成后，删除右侧选项
  const onSelectComplete = (node: Node, data: Tree) => {
    console.log(data)
    if (data.pointId === orginNode.value.pointId) {
      // 选项没有切换
      data.isEdit = false;
      return false;
    }
    const findOption = options.find(item => {
      return item.id === data.pointId;
    });
    if (findOption) {
      data.pointName = findOption.name;
      data.isEdit = false;
      dataSource.value = [...dataSource.value];
      deleteRightOptions(data);
      addRightOptions(orginNode.value)
      orginNode.value = null
    }
  };

  const appendChild = (node: Node, data: Tree) => {
    const newChild = { pointId: null, pointName: '', children: [], isEdit: true };
    if (!data.children) {
      data.children = [];
    }
    data.children.push(newChild);
    dataSource.value = [...dataSource.value];
  };

  const appendSame = (node: Node, data: Tree) => {
    const parent = node.parent;
    const children: Tree[] = parent.data.children || parent.data;
    const newChild = { pointId: null, pointName: '', children: [], isEdit: true };
    children.push(newChild);
    dataSource.value = [...dataSource.value];
  };

  const addRightOptions = (data: Tree) => {
    rightOptions.value.push({
      pointId: data.pointId,
      pointName: data.pointName
    });
  };

  const deleteRightOptions = (data: Tree) => {
    const index = rightOptions.value.findIndex(d => d.pointId === data.pointId);
    rightOptions.value.splice(index, 1);
  };

  // 删除左侧树节点，同时右侧添加选项
  const confirmDelete = (node: Node, data: Tree) => {
    const parent = node.parent;
    const children: Tree[] = parent.data.children || parent.data;
    const index = children.findIndex(d => d.pointId === data.pointId);
    children.splice(index, 1);
    dataSource.value = [...dataSource.value];
    addRightOptions(data);
  };

  const cancelDelete = () => {
    return false;
  };

  const onAdd = () => { go('/carbon/monitoring/addPoint')};
  const onBack = () => { go('/carbon/monitoring/index')}
  const onSave = () => { go('/carbon/monitoring/index')}

  const dataSource = ref<Tree[]>([
    {
      'pointId': 5,
      'pointName': '周口市人民医院',
      'children': [
        {
          'pointId': 68,
          'pointName': '主诊楼',
          'children': [
            {
              'pointId': 49,
              'pointName': '消化内科',
              'children': [
                { 'pointId': 41, 'pointName': '消化内科一诊室', 'children': null },
                { 'pointId': 40, 'pointName': '消化内科二诊室', 'children': null }
              ]
            },
            {
              'pointId': 45,
              'pointName': '普通外科',
              'children': [
                { 'pointId': 36, 'pointName': '普通外科二诊室', 'children': null },
                { 'pointId': 37, 'pointName': '普通外科一诊室', 'children': null }
              ]
            },
            {
              'pointId': 59,
              'pointName': '呼吸科',
              'children': [
                { 'pointId': 43, 'pointName': '呼吸科1诊室', 'children': null },
                { 'pointId': 42, 'pointName': '呼吸科二诊室', 'children': null }
              ]
            }
          ]
        },
        {
          'pointId': 52,
          'pointName': '住院楼',
          'children': [
            {
              'pointId': 15,
              'pointName': '住院部',
              'children': [
                { 'pointId': 73, 'pointName': '住院部二层科室', 'children': null },
                { 'pointId': 74, 'pointName': '住院部一层科室', 'children': null }
              ]
            }
          ]
        }
      ]
    }
  ]);

  const options = [
    { 'id': 72, 'projectId': 1, 'project': null, 'name': '其他', 'realPoint': true, 'code': '323', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 71, 'projectId': 1, 'project': null, 'name': 'T1', 'realPoint': true, 'code': '233', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 70, 'projectId': 1, 'project': null, 'name': 'C1', 'realPoint': true, 'code': '3333', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 67, 'projectId': 1, 'project': null, 'name': '11111', 'realPoint': true, 'code': '12345', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 54, 'projectId': 1, 'project': null, 'name': 'TR2', 'realPoint': true, 'code': '0036', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 53, 'projectId': 1, 'project': null, 'name': 'TR1', 'realPoint': true, 'code': 'TR1', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 51, 'projectId': 1, 'project': null, 'name': 'Warehouse Air Condition', 'realPoint': true, 'code': '010', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 50, 'projectId': 1, 'project': null, 'name': 'Warehouse Lighting', 'realPoint': true, 'code': '011', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 48, 'projectId': 1, 'project': null, 'name': 'Admin Lighting', 'realPoint': true, 'code': '012', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 47, 'projectId': 1, 'project': null, 'name': 'Canteen', 'realPoint': true, 'code': '013', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 46, 'projectId': 1, 'project': null, 'name': 'Admin Air Condition', 'realPoint': true, 'code': '015', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 44, 'projectId': 1, 'project': null, 'name': 'Lighting', 'realPoint': false, 'code': 'lighting', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 39, 'projectId': 1, 'project': null, 'name': 'P3021', 'realPoint': true, 'code': '3021', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 38, 'projectId': 1, 'project': null, 'name': 'P3011', 'realPoint': false, 'code': '3011', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 35, 'projectId': 1, 'project': null, 'name': 'P2011', 'realPoint': true, 'code': '2011', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 34, 'projectId': 1, 'project': null, 'name': 'P1012', 'realPoint': true, 'code': '1012', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 33, 'projectId': 1, 'project': null, 'name': 'P1011', 'realPoint': true, 'code': '1011', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 32, 'projectId': 1, 'project': null, 'name': 'T403', 'realPoint': true, 'code': '403', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 31, 'projectId': 1, 'project': null, 'name': 'T402', 'realPoint': true, 'code': '402', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 30, 'projectId': 1, 'project': null, 'name': 'T401', 'realPoint': true, 'code': '401', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 29, 'projectId': 1, 'project': null, 'name': 'T303', 'realPoint': true, 'code': '303', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 28, 'projectId': 1, 'project': null, 'name': 'T302', 'realPoint': true, 'code': '302', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 27, 'projectId': 1, 'project': null, 'name': 'T301', 'realPoint': true, 'code': '301', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 26, 'projectId': 1, 'project': null, 'name': 'T203', 'realPoint': true, 'code': '203', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 25, 'projectId': 1, 'project': null, 'name': 'T202', 'realPoint': true, 'code': '202', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 24, 'projectId': 1, 'project': null, 'name': 'T201', 'realPoint': true, 'code': '201', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 23, 'projectId': 1, 'project': null, 'name': 'Heat Belt D1', 'realPoint': true, 'code': '009', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 22, 'projectId': 1, 'project': null, 'name': 'Heat Belt C1 -变压器', 'realPoint': true, 'code': '008', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 21, 'projectId': 1, 'project': null, 'name': 'Heat Belt B1', 'realPoint': true, 'code': '006', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 20, 'projectId': 1, 'project': null, 'name': 'Heat Belt A1', 'realPoint': true, 'code': '005', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 19, 'projectId': 1, 'project': null, 'name': 'Heat Belt', 'realPoint': true, 'code': '004', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 18, 'projectId': 1, 'project': null, 'name': 'Filling Line D ', 'realPoint': true, 'code': '003', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 17, 'projectId': 1, 'project': null, 'name': 'Filling line B', 'realPoint': true, 'code': 'sheshi_id', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 16, 'projectId': 1, 'project': null, 'name': 'Filling line A -变压器', 'realPoint': true, 'code': '002', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    {
      'id': 14,
      'projectId': 1,
      'project': null,
      'name': 'Filling Line C -变压器',
      'realPoint': true,
      'code': 'Filling Line C',
      'property': null,
      'inUse': null,
      'energyStatus': false,
      'carbonStatus': false
    },
    { 'id': 13, 'projectId': 1, 'project': null, 'name': 'Blending', 'realPoint': false, 'code': 'Blending', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 4, 'projectId': 1, 'project': null, 'name': '机组#4', 'realPoint': true, 'code': 'ADL004', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 2, 'projectId': 1, 'project': null, 'name': 'ADL002', 'realPoint': true, 'code': 'ADL002', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false },
    { 'id': 1, 'projectId': 1, 'project': null, 'name': '机组#1', 'realPoint': true, 'code': 'ADL001', 'property': null, 'inUse': null, 'energyStatus': false, 'carbonStatus': false }
  ];
  const transformedOptions = options.map(item => {
    return {
      pointId: item.id,
      pointName: item.name
    };
  });

  const rightOptions = ref<OptionProps[]>(transformedOptions);
  const treeOptions = ref<OptionProps[]>(transformedOptions);
  const orginNode = ref<Tree>(null);
</script>
<style lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .tree-name {
      flex: 1;
      margin-right: 8px;
      overflow: hidden;
    }
    .tree-btn-group {
      display: flex;
      .iconfont {
        color: #bbb;
        padding: 0 8px;
        border-right: 1px solid #d9d9d9;
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  ::v-deep {
    .el-tree-node__content {
      height: 36px;
    }
  }
  .carnbon-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 110px);
    overflow: hidden;
    .monitoring-content {
      display: flex;
      margin: 16px;
      flex: 1;
      overflow: hidden;
      .monitoring-title {
        padding-left: 20px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #262626;
        line-height: 48px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }
      .monitoring-right-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .monitoring-add-btn {
          margin-right: 16px;
        }
      }
      .monitoring-left {
        flex: 1;
        background: #fff;
        margin-right: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        flex-direction: column;
        display: flex;
        .monitoring-tree {
          overflow: auto;
        }
      }
      .monitoring-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: #fff;
        margin-left: 8px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        .monitoring-list {
          flex: 1;
          overflow: auto;
          .monitoring-item {
            height: 42px;
            padding: 0 16px;
            line-height: 42px;
            &:nth-child(odd) {
              background: hsla(0, 0%, 97.6%, 0.5);
            }
          }
        }
      }
    }

  }
</style>